import Api from '@/api/index';
import '@/assets/css/UserProfile.less';
import { areaList } from '@vant/area-data';
import React, { useState } from 'react';
import Cookie from 'react-cookies';
import { useNavigate } from 'react-router-dom';
import { Area, Button, Field, Form, NavBar, Notify, Popup, Radio, Uploader } from 'react-vant';

const Profile = () => {
    let navigate = useNavigate()
    let AvatarCdn = []
    if (React.$LoginUser.avatar) {
        AvatarCdn = [
            {
                url: React.$LoginUser.avatar,
                status: 'done',
                name: 'avatar',
            },
        ]
    }
    const [avatar] = useState(AvatarCdn)
    const [form] = Form.useForm()
    const [show, setShow] = useState()

    let code = null
    if (React.$LoginUser.province) {
        code = React.$LoginUser.province.toString()
    }
    if (React.$LoginUser.city) {
        code = React.$LoginUser.city.toString()
    }
    if (React.$LoginUser.district) {
        code = React.$LoginUser.district.toString()
    }
    const [region, setRegion] = useState({
        code: code,
        region_text: React.$LoginUser.region,
        province: React.$LoginUser.province,
        city: React.$LoginUser.city,
        district: React.$LoginUser.district,
    })

    // 表单提交事件
    const onProflie = async (values) => {
        let data = {
            id: React.$LoginUser.id,
            nickname: values.nickname,
            sex: values.sex ? values.sex : React.$LoginUser.sex,
            content: values.content
        }
        if (values.password) {
            data.password = values.password
        }
        if (values.avatar[0].file) {
            data.avatar = values.avatar[0].file
        }
        if (region.code) {
            data.code = region.code
        }
        let result = await Api.ApiProfile(data)
        if (result.code === 0) {
            Notify.show({
                type: 'danger',
                message: result.msg
            })
            return false
        } else {
            Notify.show({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    Cookie.save('LoginUser', result.data)
                    React.$LoginUser = result.data
                    navigate(result.url)
                }
            })
        }
    }

    // 选择地区的方法
    const SelectRegion = (values) => {
        setShow(false)
        let [province, city, district] = values
        let code = null
        let region_text = ''
        if (province) {
            code = province.code
            region_text += province.name + '-'
        }
        if (city) {
            code = city.code
            region_text += city.name + '-'
        }
        if (district) {
            code = district.code
            region_text += district.name
        }
        setRegion({
            code: code,
            region_text: region_text
        })
    }

    const Footer = () => {
        return (
            <div className="action">
                <Button className="btn" nativeType='submit'>提交</Button>
            </div>
        )
    }

    return (
        <>
            {/* 导航 */}
            <NavBar
                title="基本资料"
                leftText="返回"
                onClickLeft={() => navigate('/user/base/index')}
            />
            {/* <!-- 用户信息 --> */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src={JSON.stringify(React.$LoginUser) !== "{}" ? React.$LoginUser.avatar : "../../assets/images/avatar.png"} alt="" />
                </div>
            </div>
            <Form
                className="profile wow fadeInUp"
                data-wow-delay="200ms"
                footer={<Footer />}
                form={form}
                onFinish={onProflie}
            >
                <Form.Item
                    labelWidth='2.5em'
                    labelAlign='right'
                    name="email"
                    label="邮箱"
                    initialValue={React.$LoginUser.email}
                    // disabled
                    readOnly
                >
                    <Field placeholder="请输入邮箱" />
                </Form.Item>
                <Form.Item
                    labelWidth='2.5em'
                    labelAlign='right'
                    name="nickname"
                    label="昵称"
                    initialValue={React.$LoginUser.nickname}
                >
                    <Field placeholder="请输入昵称" />
                </Form.Item>
                <Form.Item
                    name="password"
                    label="密码"
                    labelWidth='2.5em'
                    labelAlign='right'
                >
                    <Field type='password' placeholder="请输入密码" />
                </Form.Item>
                <Form.Item
                    name="sex"
                    label="性别"
                    labelWidth='2.5em'
                    labelAlign='right'
                >
                    <Radio.Group direction="horizontal" defaultValue={React.$LoginUser.sex}>
                        <Radio name="0">保密</Radio>
                        <Radio name="1">男</Radio>
                        <Radio name="2">女</Radio>
                    </Radio.Group>
                </Form.Item>

                {/* 城市地区 */}
                <Form.Item
                    label="地区"
                    onClick={() => setShow(true)}
                    initialValue={region.region_text}
                    labelWidth='2.5em'
                    labelAlign='right'
                    isLink
                >
                    {region.region_text}
                </Form.Item>

                {/* 个人头像 */}
                <Form.Item
                    name="avatar"
                    label="头像"
                    initialValue={avatar}
                    labelWidth='2.5em'
                    labelAlign='right'
                >
                    <Uploader maxCount="1" />
                </Form.Item>

                {/* 个人简介 */}
                <Form.Item
                    name="content"
                    label="个人简介"
                    initialValue={React.$LoginUser.content}
                    labelWidth='2.5em'
                    labelAlign='right'
                >
                    <Field type="textarea" placeholder="请输入个人简介" maxlength={200} showWordLimit rows={2} />
                </Form.Item>

            </Form>

            <Popup
                position="bottom"
                visible={show}
                onClose={() => { setShow(false) }}
            >
                <Area
                    title="选择地区"
                    value={region.code}
                    areaList={areaList}
                    onConfirm={SelectRegion}
                    onCancel={() => setShow(false)}
                />
            </Popup>
        </>
    )
}

export default Profile